<template>
  <div>
    <div style="margin: 10px 0">
      <el-input
        style="width: 300px"
        suffix-icon="el-icon-s-flag"
        placeholder="请输入用户名"
        v-model="u_name"
      ></el-input>
      <!-- <el-input style="width: 300px; margin-left: 5px;" suffix-icon="el-icon-s-promotion" placeholder="请输入邮箱"></el-input>
        <el-input style="width: 300px; margin-left: 5px;" suffix-icon="el-icon-location" placeholder="请输入地址"></el-input> -->
      <el-button style="margin-left: 5px" type="primary" @click="load"
        >搜索<i class="el-icon-search"></i
      ></el-button>
      <el-button type="warning" @click="reset"
        >重置<i class="el-icon-refresh"></i
      ></el-button>
    </div>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add"
        >新增<i class="el-icon-circle-plus-outline"></i
      ></el-button>
      <el-button
        type="danger"
        :disabled="deleteIds.length > 0 ? false : true"
        @click="deleteData"
        >批量删除<i class="el-icon-remove-outline"></i
      ></el-button>
      <el-upload
        class="upload-demo"
        :show-file-list="false"
        :accept="'.xlsx'"
        :on-success="handleExcelImportSuccess"
        action="http://localhost:8080/user/fileImport"
        style="display: inline-block; margin-left: 5px"
      >
        <el-button type="primary"
          >导入<i class="el-icon-folder-add"></i
        ></el-button>
      </el-upload>
      <el-button type="primary" @click="exp" style="margin-left: 5px"
        >导出<i class="el-icon-printer"></i
      ></el-button>
    </div>
    <el-table
      :data="tableData"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="userid" label="ID" width="80"> </el-table-column>
      <el-table-column label="头像" width="120">
        <template slot-scope="scope">
          <img
            :src="scope.row.avatar"
            alt="这是图片"
            width="60"
            height="60"
            style="border-radius: 50%"
          />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="120">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="120">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="权限" width="100">
            <template scope="scope">
                  <span v-if="scope.row.type==1" style="color:#4169E1; font-size: large">管理员</span>
                  <span v-else style="color: #BEBEBE; font-size: large">
                    普通用户
                  </span>
            </template>
          </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" @click="edit(scope.row)"
            >编辑<i class="el-icon-edit"></i
          ></el-button>
          <el-popconfirm
            style="margin-left: 5px"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="您确定删除吗？"
            @confirm="del(scope.row.userid)"
          >
            <el-button type="danger" slot="reference"
              >删除<i class="el-icon-remove-outline"></i
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="70px">
        <el-form-item prop="image" label="头像" v-model="form.avatar">
          <el-upload
            action=""
            list-type="picture-card"
            :auto-upload="false"
            :limit="Number(1)"
            :http-request="myUpload"
            ref="upload1"
            :file-list="imgfile"
            :on-success="imgSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <template scope="scope">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.row"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quit">取 消</el-button>
        <el-button type="primary" @click="submitUpload(1)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "User",
  props: {},
  data() {
    return {
      typ: 0,
      u_name: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      form: {},
      formX: {},
      collapseBtnClass: "el-icon-s-fold",
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      dialogFormVisible: false,
      multipleSelection: [],
      deleteIds: [],
      n: 0,
      dialogImageUrl: "",
      dialogVisible: false,
      imgfile: [],
      options: [{
          value: 1,
          label: "管理员"
        }, {
          value: 0,
          label: "普通用户"
        }],
        value: 0
    };
  },
  created() {
    this.load();
  },
  methods: {
    handleExcelImportSuccess() {
      this.$message.success("文件导入成功");
      this.load();
    },
    exp() {
      window.open("http://localhost:8080/user/export");
    },
    quit() {
      this.dialogFormVisible = false;
      this.load();
    },
    deleteData() {
      this.$confirm("您确定删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          console.log(this.deleteIds);
          var p = new URLSearchParams();
          p.append("userid", this.deleteIds);
          axios({
            url: "http://localhost:8080/user/delBatch",
            method: "delete",
            params: p,
          }).then((obj) => {
            if (obj.data) {
              this.$message.success("删除成功");
              this.load();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
          this.load();
        });
    },
    handleSelectionChange(dataList) {
      this.deleteIds = [];
      dataList.forEach((item) => {
        this.deleteIds.push(item.userid);
      });
      console.log(this.deleteIds);
    },
    del(id) {
      var p = new URLSearchParams();
      p.append("userid", id);
      axios({
        url: "http://localhost:8080/user/delUser",
        method: "delete",
        params: p,
      }).then((obj) => {
        if (obj.data) {
          this.$message.success("删除成功");
          this.quit();
          this.load();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    edit(row) {
      this.imgfile = [];
      console.log(row);
      this.form = row;
      console.log(this.form.username);
      this.imgfile.push({ name: "123.jpg", url: row.avatar });
      this.dialogFormVisible = true;
    },
    save() {
      // var t=new URLSearchParams();
      // t.append("userid",this.form.userid);
      var param = new URLSearchParams();
      param.append("userid", this.form.userid);
      param.append("username", this.form.username);
      param.append("email", this.form.email);
      param.append("avatar", this.dialogImageUrl);
      param.append("address", this.form.address);
      var t = new URLSearchParams();
      t.append("username", this.form.username);
      t.append("email", this.form.email);
      t.append("avatar", this.dialogImageUrl);
      t.append("address", this.form.address);
      t.append("type", this.form.type);

      if (this.typ == 0) {
        axios({
          url: "http://localhost:8080/user/updateUser",
          method: "put",
          data: param,
        }).then((obj) => {
          if (obj.data) {
            this.$message.success("修改成功");
            this.quit();
            this.load();
          } else {
            this.$message.error("修改失败");
          }
        });
      } else {
        axios({
          url: "http://localhost:8080/user/addUser",
          method: "post",
          data: t,
        }).then((obj) => {
          if (obj.data) {
            this.$message.success("新增成功");
            this.quit();
            this.load();
          } else {
            this.$message.error("新增失败,该用户名已被使用");
          }
        });
        this.typ = 0;
      }
    },
    add() {
      this.imgfile = [];
      this.dialogFormVisible = true;
      this.typ = 1;
      this.form = {};
    },
    reset() {
      this.u_name = "";
      this.load();
    },
    load() {
      var param = new URLSearchParams();
      param.append("page", this.pageNum);
      param.append("size", this.pageSize);
      param.append("username", this.u_name);
      axios({
        url: "http://localhost:8080/user/getPageByName",
        method: "get",
        params: param,
      }).then((obj) => {
        this.tableData = obj.data.records;
        this.total = obj.data.total;
      });
    },

    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },

    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
    imgSuccess(res, file) {
      this.dialogImageUrl = res.data;
      this.form.image = this.dialogImageUrl;

      //这里我是用一个fileList数组存取，当保存的时候进行图片路径处理
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitUpload(value) {
      if (value == 1) {
        this.$refs["upload1"].submit();
      }
    },
    myUpload(content) {
      var param = new FormData();
      param.append("uploadFile", content.file);
      axios({
        url: "http://localhost:8080/user/upload",
        method: "post",
        data: param,
      }).then((obj) => {
        this.$message.success(obj.data.message);
        if (obj.data.status == 1) {
          this.dialogImageUrl = obj.data.data;
          console.log(this.dialogImageUrl);

          this.save();
          this.clearFiles();
        }
      });
    },

    clearFiles() {
      this.$refs["upload1"].clearFiles();
    },
  },
};
</script>
